<template>
	<view class="tableStyleWP">
		<view class="tableStyleMain">
			<view class="tableStyleItem" v-for="(item,index) in membersList" :key="index"
				:style="{transform:item.ui_position,zIndex: index===personIndex?9:1,transition:transition?'all .5s':''}"
				@tap="clickItem(item,index)">
				<view class="tableItemImgWp">
					<img v-if="item.head" :src="item.head" alt="" :class="{mainSeat: index==0?true:false}">
					<img v-else :src="defaultHead" alt="" :class="{mainSeat: index==0?true:false}">
				</view>
				<view class=" name">
					{{item.name?item.name:'待定'}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapGetters,
	} from 'vuex'
	export default {
		props: {
			maxCount: {
				type: Number,
				required: true
			},
			membersList: {
				type: Array,
				required: true
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			onlyShowInfo: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				defaultHead: 'https://file.casugn.com/storecompcard//5M1g8pXTs7vzebb3f022d3497573ddfd36ef60b87ef3_1663224511371.webp',
				placeHolderUserObj: {
					name: '待定',
					head: 'https://file.casugn.com/storecompcard//5M1g8pXTs7vzebb3f022d3497573ddfd36ef60b87ef3_1663224511371.webp',
					isNotice: 1
				},
				personIndex: -1, // 当前操作的座位下标
				guestIndex: -1,
				transition: true,
				isDel: false
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			clickItem(item, index) {
				if (this.onlyShowInfo) {
					return false
				}
				this.personIndex = this.personIndex === index ? -1 : index
				this.$emit('clickPartyItem', {
					item,
					index
				})
			},

		},
	}
</script>

<style lang="scss">
	.tableStyleWP {
		margin: 0 auto;
		width: 700rpx;
		height: 800rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.tableStyleMain {
			background: url('https://file.casugn.com/storecompcard/temp/桌子@2x_1655955381924.png') no-repeat 49% 57%;
			background-size: 400rpx 400rpx;
			width: 700rpx;
			height: 700rpx;
			position: relative;

			.tableStyleItem {
				position: absolute;
				transform-origin: 0px 0px;

				.tableItemImgWp {
					position: relative;

					img {
						width: 80upx;
						height: 80rpx;
						border-radius: 10rpx;
					}

					.mainSeat {
						border: 4px solid #fcc307;
					}

				}

				.name {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					text-align: center;
				}
			}
		}
	}
</style>